<template xmlns:el-table="http://www.w3.org/1999/html">
  <div>
    <el-table :data="page.list" @selection-change="getIds">
      <el-table-column type="selection"></el-table-column>
      <el-table-column prop="id" label="编号"></el-table-column>
      <el-table-column prop="name" label="姓名"></el-table-column>
      <el-table-column prop="post" label="专业"></el-table-column>
      <el-table-column prop="entryTime" label="时间"></el-table-column>
      <el-table-column prop="department" label="岗位"></el-table-column>
      <el-table-column  label="性别">
        <template slot-scope="scope">
          <span v-if="scope.row.sex">男</span>
          <span v-else>女</span>
        </template>
      </el-table-column>



      <el-table-column label="操作">
        <template slot-scope="scope">
          <el-button type="danger" @click="toDelteById(scope.row.id)">删除</el-button>
          <el-button type="warning"@click="toUpdateForm(scope.row.id)">修改</el-button>
        </template>
      </el-table-column>
    </el-table>
    <hr/>
    <el-button type="primary" @click="showAddForm=true">添加</el-button>
    <el-button type="danger" @click="todeleteMany">批量删除</el-button>
<!--    添加对话框-->
    <el-dialog :visible.sync="showAddForm">
      <el-form :model="teacher">

        <el-form-item label="姓名" label-width="80px">
          <el-input type="text" v-model="teacher.name"/>
        </el-form-item>

        <el-form-item label="专业" label-width="80px">
          <el-input type="text" v-model="teacher.post"/>
        </el-form-item>

        <el-form-item label="时间" label-width="80px">
          <el-input type="date" value-format="yyyy-MM-dd" v-model="teacher.entryTime"/>
        </el-form-item>

        <el-form-item label="岗位" label-width="80px">
          <el-input type="text" v-model="teacher.department"/>
        </el-form-item>

        <el-form-item label="性别" label-width="80px">
          <el-radio-group v-model="teacher.sex">
            <el-radio label="1">男</el-radio>
            <el-radio label="0">女</el-radio>
          </el-radio-group>
        </el-form-item>

        <el-button type="primary" @click="toAllPerson">添加</el-button>
      </el-form>

    </el-dialog>
<!--修改对话框-->
    <el-dialog :visible.sync="showUpdateForm">
      <el-form :model="teacher">

        <el-form-item label="姓名" label-width="80px">
          <el-input type="text" v-model="teacher.name"/>
        </el-form-item>

        <el-form-item label="专业" label-width="80px">
          <el-input type="text" v-model="teacher.post"/>
        </el-form-item>

        <el-form-item label="时间" label-width="80px">
          <el-input type="date" value-format="yyyy-MM-dd" v-model="teacher.entryTime"/>
        </el-form-item>

        <el-form-item label="岗位" label-width="80px">
          <el-input type="text" v-model="teacher.department"/>
        </el-form-item>

        <el-form-item label="性别" label-width="80px">
          <el-radio-group v-model="teacher.sex">
            <el-radio :label="1">男</el-radio>
            <el-radio :label="0">女</el-radio>
          </el-radio-group>
        </el-form-item>

        <el-button type="primary" @click="toUpdatePerson">修改</el-button>
      </el-form>
    </el-dialog>
    <el-pagination
      layout="sizes, prev, pager, next, jumper, ->, total"
      :total="page.total"
      :page-size.sync="page.pageSize"
      :page-sizes="pageSizes"
      :current-page.sync="page.pageNum"
      :pager-count="2"
      @current-change="e"
      @size-change="g">
    </el-pagination>
  </div>

</template>

<script>
import qs from 'qs'
export default {
  name: "ShowAllTeacher",
  data(){
    return{
      showAddForm:false,
      showUpdateForm:false,
      teacher:{},
      page:{},
      ids:[],
      pageSizes:[2,3,5,10]
    }
  },created() {
    this.selectAll()
  },
  methods:{
    selectAll(){
      this.axios({
        method :"get",
        url:"/Teacher/"+1+"/"+3
      }).then(resp=>{
        this.page=resp.data
      })
    },
    e(pageNum){
      this.axios({
        method:"get",
        url:"/Teacher/"+pageNum+"/"+this.page.pageSize,
      }).then(resp=>{
        this.page=resp.data
      })
      console.log(pageNum)
    },
    g(pageSize){
      this.axios({
        method :"get",
        url:"/Teacher/"+this.page.pageNum+"/"+pageSize,
      }).then(resp=>{
        this.page=resp.data
      })
    },
    toAllPerson(){
     this.axios({
       method:"post",
       url:"/Teacher/",
       data:this.teacher
     }).then(resp=>{
       this.selectAll()
       this.showAddForm=false
       this.teacher={}
       this.$message({
         type:"success",
         message:"添加成功"
       })

     }).catch(error => {
       this.showAddForm=false
       this.teacher={}
       this.$message({
         type:"error",
         message:"添加失败"
       })

     })
    },
    // 删除
    toDelteById(id){
      this.axios({
        method:"delete",
        url:"/Teacher/"+id,
      }).then(resp=>{
       this.selectAll()
      })
    },
    // 批量删除
    getIds(values){
      this.ids=[]
      for (let i=0;i<values.length;i++){
        this.ids.push(values[i].id)
      }
      console.log(this.ids)
    },
    todeleteMany(){
      this.$confirm("你确定要批量删除吗","批量删除提示",{
        confirmButtonText:"确定删除",
        cancelButtonText:"取消删除"
      }).then(()=>{
        this.axios({
          method:"delete",
          url:"/Teacher/",
          data:this.ids,
          paramsSerializer: params =>qs.stringify(params,{indices:false})
        }).then(resp=>{
            this.selectAll()
            this.$message({
              type:"success",
              message:"删除成功"
            })
          })
      }).catch(resp=>{
        this.$message({
          type:"danger",
          message: "取消删除"
        })
      })
    },
    // 修改
    toUpdateForm(id){
      this.axios({
        methods: "get",
        url:"/Teacher/"+id,
      }).then(resp =>{
        this.teacher=resp.data
        this.showUpdateForm=true
      })
    },
    toUpdatePerson(){
      this.axios({
        method:"put",
        url:"/Teacher/",
        data:this.teacher
      }).then(resp=>{
        this.selectAll()
        this.showUpdateForm=false
        this.person={}
        this.$message({
          type:"success",
          message:"修改成功",
        })
      }).catch(error => {
        this.selectAll()
        this.showUpdateForm=false
        this.person={}
        this.$message({
          type:"error",
          message:"修改失败",
        })
      })
    }

  }
}
</script>

<style scoped>

</style>
